<template>
  <div class="site-preview-card">
    <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      :before-close="onClose"
      width="640px"
    >
      <div class="info-con" v-if="siteTempPreviewItem">
        <p class="info">
          设置作品信息
          <i class="jy-icon-layer-closed btn-close" @click.stop="onClose"></i>
        </p>
        <el-button type="primary" @click.stop="Online">{{
          siteTempPreviewItem.status == 1 ? "下 线" : "上 线"
        }}</el-button>
        <p class="date">最近编辑日期：{{ siteTempPreviewItem.update_time }}</p>
        <p class="qr" @click="onQrcode"><img :src="siteTempPreviewItem.qrcode" /></p>
        <p class="template">手机扫一扫预览</p>
        <a class="pageurl">{{ siteTempPreviewItem.pageurl }}</a>
        <p class="link-con" @click.stop="clipboardCopy(siteTempPreviewItem.pageurl)">
          <span class="link"><i class="jy-icon-link"></i>复制链接</span>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { useWebCardCompStore } from "@/store/web/card-component";
import { copyUtils } from "@/views/js/copy-utils";
const useWebCardComp = useWebCardCompStore();
export default {
  mixins: [copyUtils],
  components: {
    // SettingShareAll,
  },
  props: ["isVisible"],
  computed: {
    site_id() {
      return useWebCardComp.siteData.id;
    },
    share() {
      return useWebCardComp.siteData.attrs
        ? _.cloneDeep(useWebCardComp.siteData.attrs.share)
        : null;
    },
    siteTempPreviewItem() {
      return useWebCardComp.sitePreshowData;
    },
    isTemplete() {
      return useWebCardComp.siteData.is_template == 1 ? true : false;
    },
    dialogVisible() {
      return this.isVisible && this.siteTempPreviewItem;
    },
  },
  methods: {
    onQrcode() {
      let site_id = this.site_id;
      useWebCardComp.recoverSiteQrcode({ site_id });
    },
    async Online() {
      const useWebUser = useWebUserStore();
      // 1. online 2-下线，1-上线
      let params = {
        online: this.siteTempPreviewItem.status == 1 ? 2 : 1, // online 2-下线，1-上线
        site_id: this.site_id,
        isTempPreviewUrl: false,
      };
      await useWebUser.onlineSite(params);

      // 2. 获取更新 sitePreshowData; 更新 shared_text_qrcode
      await useWebCardComp.getCardSitePreshow4Qrcode({
        id: this.site_id,
      });
    },
    onChange() {},
    onClose() {
      useWebCardComp.updateMgSitePreview({ isActive: false });
    },
  },
};
</script>

<style lang="scss">
.site-preview-card {
  position: absolute;
  z-index: 9999;

  .share-all-style {
    padding: 0;
  }
  .el-dialog {
    width: 640px;
    background: transparent;
    box-shadow: none !important;

    .el-dialog__header {
      display: none;
    }
  }
  .el-dialog__body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    height: inherit;

    .info-con {
      position: relative;
      width: 320px;
      height: inherit;
      background-color: #ffffff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      // justify-content: center;

      .info {
        top: 12px;
        margin-bottom: 20px;
        text-align: left;
        font-size: 16px;
        color: #373438;
        .btn-close {
          position: absolute;
          top: 12px;
          right: 10px;
        }
      }
      .el-button {
        padding: 10px 20px;
        border-radius: 0;
        margin: 10px 0;
        margin-top: 20px;
        width: 100%;
      }
      .qr {
        text-align: center;
        margin-top: 40px;
        img {
          width: 120px;
          height: 120px;
        }
      }
      .date {
        color: #a5afbe;
        text-align: left;
        font-size: 12px;
      }
      .link-con {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .link {
        border: 1px solid #f3f5fa;
        width: 126px;
        padding: 4px 20px;
        color: #43475c;
        display: inline-block;
        cursor: pointer;
      }
      .template {
        color: #43475c;
        text-align: center;
        font-size: 12px;
        margin-top: 10px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
